<template>
  <div class="device_box">
    <canvas v-show="re_flash" :id="canvas" :width="width" height="30"/>
  </div>
</template>

<script>
import {defineComponent, toRefs, reactive, getCurrentInstance} from "vue"
import {useStore} from "vuex"
import {decode_data} from "@/utils/base64";
import {useRoute} from "vue-router";
import {get_device_status_info_by_code} from "@/api/cockpit/data";
import {getStyleByEl} from "@/utils/dom/get_dom_style";

function handle_data_list(data) {
  for (let i = 0; i < data.length; i++) {
    try {
      console.log(data[i].dictCode.split(','))
      const dicCode = data[i].dictCode.split(',')
      data[i].dictCode = dicCode
    } catch (e) {
      // message.error("数据异常")
      data[i].dictCode = []
    }
  }
  return data;

}

export default defineComponent({
  name: "device",
  props: {
    canvas: String,
    width: Number,
    data_status_list: {
      type: Array,
      default: []
    },
    re_flash: {
      type: Boolean,
      default: true
    }
  },

  setup(props, context) {
    // const canvas = "myCanvas"
    const {ctx} = getCurrentInstance()
    const route = useRoute()
    const store = useStore()
    const data_canvas = reactive({
      canvas: "ceshi",
      data: [1],
      width: ""
    })

    let {canvas, data_status_list, width} = toRefs(props)

    // const data_list = data_status_list.value
    // const width_item = Math.ceil(width.value / data_list.length)
    // //绘制的宽度


    function start_draw() {
      try {
        let canvas_dom = document.getElementById(canvas.value);
        // console.log(width_item)
        let context = canvas_dom.getContext("2d");
        let colors = ["#FF0000", "#00FF00", "#ffff00", "#cccccc"]; //"#ffff00"
        //--数据处理  DictCode 字段值  0 关机,1 待机， 2 工作，3 异常， 99 还未开始
        // let timer = setInterval(() => {
        let color = colors[Math.floor(Math.random() * colors.length)]

        for (let i = 0; i < data_list.length; i++) {
          const x = i * width_item;
          const val = Number(data_list[i]);
          context.fillRect(x, 0, width_item, 30);
          console.log(val)
          if (val === 0) {
            color = colors[0]
          } else if (val === 1 || val === 2) {
            color = colors[1]
          } else if (val === 3) {
            color = colors[2]
          } else {
            color = colors[3]
          }
          context.fillStyle = color;
        }
      } catch (e) {
        console.log("发生异常")

      }
    }


    const get_data_list = async () => {
      let params = {
        uEquipmentCode: decode_data(route.query.uEquipmentCode)
      }
      const res = await get_device_status_info_by_code(params)
      // console.log("设备切片", res)
      if (res.code === 1) {
        data_canvas.data = handle_data_list(res.data)
        ctx.init(data_canvas.data[0].dictCode, canvas.value)
      }
    }

    get_data_list()
    return {
      store,
      // start,
      data_canvas,
      get_data_list
    }
  },

  mounted() {
    this.get_data_list()

  },
  methods: {
    init(data_list, canvas) {
      // const data_list = data_status_list.value
      //绘制的宽度
      const width_item = this.width / data_list.length
      // debugger
      // function start_draw() {
      try {
        let canvas_dom = document.getElementById(canvas);
        // console.log(width_item)
        let context = canvas_dom.getContext("2d");
        let colors = ["#FF0000", "#00FF00", "#ffff00", "#05274c"]; //"#ffff00"
        //--数据处理  DictCode 字段值  0 关机,1 待机， 2 工作，3 异常， 99 还未开始
        // let timer = setInterval(() => {
        let color = colors[Math.floor(Math.random() * colors.length)]

        for (let i = 0; i < data_list.length; i++) {
          const x = i * width_item;
          const val = Number(data_list[i]);
          context.fillRect(x, 0, width_item, 30);
          console.log(val)
          if (val === 0) {
            color = colors[0]
          } else if (val === 1 || val === 2) {
            color = colors[1]
          } else if (val === 3) {
            color = colors[2]
          } else {
            color = colors[3]
          }
          context.fillStyle = color;
        }
      } catch (e) {
        console.log("发生异常")

      }
      // }
    }
  }

})
</script>

<style scoped lang="scss">
.device_box {
  //padding: 1rem;
  //background: url("http://www.newhlty.tz-group.com/img/bg.82f8f7db.png") no-repeat top center;
  height: 100%;
  width: 100%;
}

</style>
